
<div style="POSITION: relative" id="content">
  <h3>使用easyUI创建一个自动播放的tabs </h3>
  <div id="article_content" class="article_content">
    <p>这个教程将向你展示如何创建一个自动播放的tabs. tabs 组件显示第一个tab panel,然后显示第二个,第三个.....,我们将写一些代码自动的切换tab panel,然后让他循环.</p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344499734_9392.png" alt="" /></span></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤1: 创建 tabs</h4>
    <pre name="code" class="html">&lt;div id=&quot;tt&quot; class=&quot;easyui-tabs&quot; style=&quot;width:330px;height:270px;&quot;&gt;  
    &lt;div title=&quot;Shirt1&quot; style=&quot;padding:20px;&quot;&gt;  
        &lt;img src=&quot;images/shirt1.gif&quot;&gt;  
    &lt;/div&gt;  
    &lt;div title=&quot;Shirt2&quot; style=&quot;padding:20px;&quot;&gt;  
        &lt;img src=&quot;images/shirt2.gif&quot;&gt;  
    &lt;/div&gt;  
    &lt;div title=&quot;Shirt3&quot; style=&quot;padding:20px;&quot;&gt;  
        &lt;img src=&quot;images/shirt3.gif&quot;&gt;  
    &lt;/div&gt;  
    &lt;div title=&quot;Shirt4&quot; style=&quot;padding:20px;&quot;&gt;  
        &lt;img src=&quot;images/shirt4.gif&quot;&gt;  
    &lt;/div&gt;  
    &lt;div title=&quot;Shirt5&quot; style=&quot;padding:20px;&quot;&gt;  
        &lt;img src=&quot;images/shirt5.gif&quot;&gt;  
    &lt;/div&gt;  
&lt;/div&gt; </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 2: 写自动播放代码</h4>
    <pre name="code" class="javascript">var index = 0;  
var t = $('#tt');  
var tabs = t.tabs('tabs');  
setInterval(function(){  
    t.tabs('select', tabs[index].panel('options').title);  
    index++;  
    if (index &gt;= tabs.length){  
        index = 0;  
    }  
}, 3000);  </pre>
    <p>正如你所见到的,我们调用'tabs'方法去得到所有tab panel和切换他们,使用'setInterval'函数. </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/layout/downloads/easyui-tabs3-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-tabs-demo.zip</a></div>
   </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>